import React, {useEffect, useState} from 'react'

import {Button, Card, Form, Input, message, Select} from 'antd'
import {SearchOutlined, SyncOutlined} from '@ant-design/icons'
import {fetchRequest} from '@/utils/Request';
import {url} from '@/utils/url';
import {debounce} from 'lodash'

const {Option} = Select;

function HandelSearch(props: any) {

    // 解构 props  
    const {handleFinish, isSearch} = props

    //  存放扫码设备类型数据数组
    const [devTypeList, setDevTypeList] = useState<any>([]);

    //  扫码设备类型循环下拉框数据
    const typeOptions = devTypeList.map((d: any, index: number) => <Option value={d.value}
                                                                           key={index}>{d.title}</Option>);

    //  存放设备类型数据数组
    const [videoTypeList, setVideoTypeList] = useState<any>([]);

    //  视频设备类型循环下拉框数据
    const videoTypeOptions = videoTypeList.map((d: any, index: number) => <Option value={d.value}
                                                                                  key={index}>{d.title}</Option>);

    //  存放校区名称数据数组
    const [collegeAreaList, setCollegeAreaList] = useState<any[]>([]);


    //  校区名称循环下拉框数据
    const collegeAreaOption = collegeAreaList.map((d: any, index: number) => <Option value={d.collegeAreaId}
                                                                                     key={index}>{d.collegeAndArea}</Option>);


    // 获取设备类型
    // async function getDevTypeRequest() {

    //     try {
    //         const json = await fetchRequest(url.GET_DEV_TYPE, "");
    //         if (json.success) {
    //             setDevTypeList(json.data[0].children)
    //         } else {
    //             message.destroy();
    //             message.error(json.error)
    //         }
    //     } catch (error: any) {
    //         message.destroy();
    //         message.error(error.message)
    //     }
    // }

    //  获取校区名称
    async function getSchoolOrganizationRequest(collegeAndAreName: string = '') {
        try {
            const json = await fetchRequest(url.ALL_COLLEGE_ADN_AREA, {collegeAndAreName: collegeAndAreName});
            if (json.success) {
                message.destroy();
                console.log(json.data)
                setCollegeAreaList(json.data);
            } else {
                message.destroy();
                message.error(json.error);
            }
        } catch (error: any) {
            message.destroy();
            message.error(error.message);
        }
    }

    //  获取视频设备设备类型下拉数据
    async function getDevType() {
        try {
            const json = await fetchRequest(url.GET_DEVTYPE, {"devType": 2});
            if (json.success) {
                setVideoTypeList(json.data[0].children)
            } else {
                message.destroy();
                message.error(json.error)
            }
        } catch (error: any) {
            message.destroy();
            message.error(error.message)
        }
    }

    const handleReset = () => {
        form.resetFields();
    }

    const onSearch = debounce(getSchoolOrganizationRequest, 300, {leading: false, trailing: true})


    useEffect(() => {
        getSchoolOrganizationRequest();
        if (isSearch && isSearch === "videoTerminal") {
            getDevType();
        } else ;
    }, [])

    const [form] = Form.useForm()

    const videoData = (
        <Form form={form} layout="inline"
              
              
              
              
              
              
              
              
              onFinish={handleFinish} onReset={handleReset}>
            <Form.Item className="form-control-item" name="devLocation" label="校区地址">
                <Select style={{width: 200}}
                        showSearch
                        notFoundContent={null}
                        onSearch={onSearch}
                        filterOption={false}
                        defaultActiveFirstOption={false}


                >
                    {collegeAreaOption}
                </Select>
            </Form.Item>
            <Form.Item className="form-control-item" name="devModelId" label="设备类型">
                <Select className="search-form-item" style={{width: 150}}>
                    {videoTypeOptions}
                </Select>
            </Form.Item>
            <Form.Item className="form-control-item" name="devName" label="设备名称">
                <Input className="search-form-item" style={{width: 150}}/>
            </Form.Item>
            <Form.Item className="form-control-item">
                <Button key="1" type="primary" icon={<SearchOutlined/>} htmlType="submit"
                        style={{marginRight: '8px'}}>查询</Button>
                <Button key="2" icon={<SyncOutlined/>} htmlType="reset">重置</Button>
            </Form.Item>
        </Form>
    )

    const scanTerminalData = (
        <Form form={form} layout="inline"
              onFinish={handleFinish} onReset={handleReset}>
            <Form.Item className="form-control-item" name="devLocation" label="校区地址">
                <Select style={{width: 200}}
                        showSearch
                        notFoundContent={null}
                        onSearch={onSearch}
                        filterOption={false}
                        defaultActiveFirstOption={false}
                >
                    {collegeAreaOption}
                </Select>
            </Form.Item>
            <Form.Item className="form-control-item" name="hostId" label="终端序列">
                <Input style={{width: 150}}/>
            </Form.Item>
            <Form.Item className="form-control-item" name="state" label="状态">
                <Select className="search-form-item" style={{width: 150}}>
                    <Select.Option value={1}>在线</Select.Option>
                    <Select.Option value={5}>离线</Select.Option>
                </Select>
            </Form.Item>
            <Form.Item className="form-control-item" name="createUser" label="创建人员">
                <Input/>
            </Form.Item>
            <Form.Item className="form-control-item">
                <Button key="1" type="primary" icon={<SearchOutlined/>} htmlType="submit"
                        style={{marginRight: '8px'}}>查询</Button>
                <Button key="2" icon={<SyncOutlined/>} htmlType="reset">重置</Button>
            </Form.Item>
        </Form>
    )
    return (
        <Card className="search-box" style={{padding: 24}}>
            {isSearch === 'videoTerminal' ? videoData : scanTerminalData}
        </Card>
    )
}

export default HandelSearch
